<template>
  <div class="home">
    <!-- 头部 -->
    <header>
      <h1>浙江联通网络智慧大屏</h1>
      <div class="showTime">{{ nowDate }}</div>
      <div class="nav">
        <router-link to="/ghjs">移动网络——规划建设</router-link>
        <router-link to="/ydwl">移网运营</router-link>
        <router-link to="/wyxt">移动网络——网业协同</router-link>
      </div>
    </header>
    <!-- 页面主题部分,根据导航动态显示 -->
    <div class="mainbox">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "Home",
  data() {
    return {
      nowDate: "", // 当前日期
    };
  },
  created() {
    this.currentTime();
  },
  methods: {
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      // let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
    },
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>

<style lang="less" scoped>
// 头部
header {
  position: relative;
  height: 100px;
  // background-color: black;
  background-size: 100% 100%;
  h1 {
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 30px;
    line-height: 75px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
  // 导航
  .nav {
    margin: 10px 0 0 0;
    text-align: center;
    // background-color: blue;
  }

  .nav a {
    margin: 0 10px 0 0;
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;
  }

  .nav a.router-link-exact-active {
    color: #42b983;
  }
}
// 页面主体盒子
.mainbox {
  // min-width: 1024px;
  // max-width: 1920px;
  padding: 10px 10px 0;
  // background-color: black;
}
</style>
